<template>
  <view class="notification-container" v-if="notifications.length > 0">
    <view
      class="notification-card"
      v-for="item in notifications"
      :key="item.oId"
      @click="handleNotificationClick(item)"
      :class="{ unread: !item.hasRead }"
    >
      <!-- 用户头像 -->
      <image
        class="user-avatar"
        :src="item.commentAuthorThumbnailURL"
        mode="aspectFill"
      ></image>

      <!-- 通知内容区 -->
      <view class="content-wrapper">
        <!-- 用户信息和时间 -->
        <view class="user-action-row">
          <text class="username">{{ item.commentAuthorName }}</text>
          <text class="action-text">回复了你的评论</text>
          <text class="time-ago">{{ formatTime(item.commentCreateTime) }}</text>
        </view>

        <!-- 文章信息 -->
        <view class="article-info" v-if="item.commentArticleTitle">
          <view class="article-title-wrapper">
            <FeatherIcon
              v-if="item.commentArticlePerfect === 1"
              name="award"
              size="14"
              color="#666"
              class="perfect-icon"
            />
            <text class="article-title">{{ item.commentArticleTitle }}</text>
          </view>
        </view>

        <!-- 评论内容 -->
        <view class="comment-content">
          <text class="comment-text">{{ formatContent(item) }}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 空状态 -->
  <view class="empty-container" v-else-if="!loading">
    <FeatherIcon name="message-circle" size="60" color="#e0e0e0" />
    <text class="empty-title">暂无回复通知</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import { timeAgo } from "@/utils/common.js";

const props = defineProps({
  notifications: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["notification-click"]);

// 处理通知点击
const handleNotificationClick = (notification) => {
  // 标记为已读的ID
  const readId = notification.oId;

  // 准备跳转信息，标准化跳转目标
  let routeInfo = {
    readId: readId, // 用于标记已读的ID
    type: "article", // 默认跳转类型：文章、webview等
    params: {}, // 跳转参数
  };

  // 针对回复通知，确定跳转位置
  if (notification.commentSharpURL) {
    // 尝试从URL中提取文章ID
    const articleId = getArticleIdFromURL(notification.commentSharpURL);

    if (articleId) {
      // 如果成功解析到文章ID，跳转到文章详情
      routeInfo.type = "article";
      routeInfo.params = {
        id: articleId,
      };
    } else {
      // 如果无法解析ID，则使用webview打开完整链接
      routeInfo.type = "webview";
      routeInfo.params = {
        url: notification.commentSharpURL,
      };
    }
  } else if (notification.commentOnArticleId) {
    // 如果有评论所在的文章ID
    routeInfo.type = "article";
    routeInfo.params = {
      id: notification.commentOnArticleId,
    };
  } else {
    // 回退方案：使用文章标题和其他信息在父组件中查找
    routeInfo.type = "unknown";
    routeInfo.original = notification; // 保留原始数据
  }

  // 发送标准格式的通知点击事件
  emit("notification-click", routeInfo);
};

// 从评论URL中提取文章ID
const getArticleIdFromURL = (url) => {
  if (!url) return null;

  // 常见的评论URL格式: /article/123456#comment-456789
  const match = url.match(/\/article\/(\d+)/);
  return match ? match[1] : null;
};

// 格式化通知内容
const formatContent = (item) => {
  if (!item) return "";

  try {
    if (item.commentContent) {
      return String(item.commentContent)
        .replace(/<[^>]*>/g, " ")
        .replace(/\s+/g, " ")
        .trim();
    }
    return "";
  } catch (error) {
    console.error("格式化内容错误", error);
    return String(item.commentContent || "");
  }
};

// 格式化时间显示
const formatTime = (timestamp) => {
  if (!timestamp) return "";

  try {
    // 处理CST格式的时间字符串
    if (typeof timestamp === "string" && timestamp.includes("CST")) {
      // 将CST时间字符串转换为Date对象
      const dateStr = timestamp.replace("CST", "GMT+0800");
      const date = new Date(dateStr);
      if (!isNaN(date.getTime())) {
        return timeAgo(date.getTime());
      }
    }

    // 原有的处理逻辑
    return timeAgo(timestamp);
  } catch (err) {
    console.error("格式化时间错误", err);
    return "";
  }
};
</script>

<style>
/* 主容器 */
.notification-container {
  background-color: #f8f8f8;
}

/* 通知卡片 */
.notification-card {
  position: relative;
  display: flex;
  padding: 28rpx 32rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
}

/* 未读状态 */
.notification-card.unread {
  background-color: #fafafa;
}

/* 用户头像 */
.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  margin-right: 24rpx;
  flex-shrink: 0;
}

/* 内容容器 */
.content-wrapper {
  flex: 1;
  overflow: hidden;
}

/* 用户操作行 */
.user-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12rpx;
}

/* 用户名 */
.username {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  margin-right: 8rpx;
}

/* 操作文本 */
.action-text {
  font-size: 26rpx;
  color: #666666;
  margin-right: 12rpx;
}

/* 时间文本 */
.time-ago {
  font-size: 24rpx;
  color: #999999;
  margin-left: auto;
}

/* 文章信息 */
.article-info {
  margin-bottom: 12rpx;
}

/* 文章标题包装器 */
.article-title-wrapper {
  display: flex;
  align-items: center;
}

/* 精选图标 */
.perfect-icon {
  margin-right: 8rpx;
  flex-shrink: 0;
}

/* 文章标题 */
.article-title {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 评论内容 */
.comment-content {
  margin-top: 8rpx;
}

/* 评论文本 */
.comment-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 空状态容器 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160rpx 0;
}

/* 空状态标题 */
.empty-title {
  font-size: 30rpx;
  color: #999999;
  margin-top: 24rpx;
}

/* 卡片激活状态 */
.notification-card:active {
  background-color: #f7f7f7;
}
</style>
